<template>
	<view class="index-wrapper">
		<view class="banner flex"></view>
		<view class="top-box">
			<!-- 轮播 -->
			<swiper class="swiper" circular vertical :autoplay="true" :interval="2500" :duration="600">
				<swiper-item class="swiper-item flex-center" v-for="(item, index) in swiperList" :key="index">
					<view class="notice flex-center">
						<image class="avatar-icon" :src="item.avatar" mode="aspectFit"></image>
						<text class="nickname">{{ item.nickname }}</text>
						<text class="type">{{ item.type_name }}</text>
						回收成功
						<text class="time">{{ item.time }}</text>
					</view>
				</swiper-item>
			</swiper>
			
			<!-- 旧衣回收分类 -->
			<view class="clothing-block">
				<view class="clothing-classify flex-center-between">
					<view class="classify-item flex-center flex-column" v-for="item in clothingClassifyList" :key="item.name" @click="linkOrder(item)">
						<image class="icon" :src="item.icon" mode="aspectFit"></image>
						<text class="name">{{ item.name }}</text>
					</view>
				</view>
				<image src="/static/icon/banner2.jpg" class="rec-banner" mode="aspectFill" @click="linkOrder()"></image>
			</view>
		</view>
		<view class="main-block">
			<!-- 所有回收类别 -->
			<view class="recycle-classify flex-center-between">
				<view class="classify-item flex-center flex-column" v-for="item in recyleClassifyList" :key="item.name" @click="linkOrder(item)">
					<image class="icon" :src="item.icon" mode="aspectFit"></image>
					<text class="name">{{ item.name }}</text>
				</view>
			</view>

			<!-- 热门活动 -->
			<view class="hot-activity bottom-block">
				<view class="title">热门活动</view>
				<uv-skeletons :loading="skeletonSetting.hotActivityLoading" :animate="true" :skeleton="skeletonSetting.hotActivitySkeleton">
					<view class="flex-center-between">
						<view class="hot-activity-item"  @click="activityClick">
							<image class="image" src="../../static/icon/activity2.jpg" mode="aspectFill"></image>
						</view>
						<view class="hot-activity-item"  @click="activityClick">
							<image class="image" src="../../static/icon/activity2.jpg" mode="aspectFill"></image>
						</view>
					</view>
				</uv-skeletons>
			</view>

			<!-- 更多精彩 -->
			<view class="more-activity bottom-block">
				<view class="title">更多精彩</view>
				<uv-skeletons :loading="skeletonSetting.moreActivityLoading" :animate="true" :skeleton="skeletonSetting.moreActivitySkeleton">
					<view class="activity-list flex-center-between flex-wrap">
						<view class="activity-item" v-for="(item, index) in activityList" :key="index" @click="activityClick">
							<image class="image" :src="item.image" mode="aspectFill"></image>
						</view>
					</view>
				</uv-skeletons>
			</view>

			<!-- 常见问题 -->
			<view class="common-question bottom-block">
				<view class="title flex-center-between">
					<text>常见问题</text>
					<icon class="update-icon" @click="changeQuestion"></icon>
				</view>
				<uv-skeletons :loading="skeletonSetting.commonQuestionLoading" :animate="true" :skeleton="skeletonSetting.commonQuestionSkeleton">
					<view class="question-list flex-center-between flex-wrap">
						<view class="question-item" v-for="(item, index) in questionList" :key="item.id">
							<view class="question">
								{{ index + 1 + '、' + item.question }}
							</view>
							<view class="answer">
								{{ item.answer }}
							</view>
						</view>
					</view>
				</uv-skeletons>
			</view>
		</view>
		
		<dui-toast ref="toast"></dui-toast>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { skeletonSetting } from '@/common/skeleton.js';

const clothingClassifyList = reactive([
	{
		type: 'clothes',
		name: '四季衣物',
		icon: '/static/icon/clothes.png'
	},
	{
		type: 'clothes',
		name: '鞋靴旧包',
		icon: '/static/icon/shoes1.png'
	},
	{
		type: 'clothes',
		name: '围巾帽子',
		icon: '/static/icon/hat.png'
	},
	{
		type: 'clothes',
		name: '床单被套',
		icon: '/static/icon/bed-sheet.png'
	},
	{
		type: 'clothes',
		name: '毛绒玩具',
		icon: '/static/icon/toy.png'
	}
]);
const recyleClassifyList = reactive([
	{
		type: 'clothes',
		name: '旧衣回收',
		icon: '/static/icon/clothes.png'
	},
	{
		type: 'clothes',
		name: '毛绒玩具',
		icon: '/static/icon/toy.png'
	},
	{
		type: 'books',
		name: '书籍回收',
		icon: '/static/icon/book.png'
	},
	{
		type: 'home-appliances',
		name: '家电回收',
		icon: '/static/icon/household-appliances.png'
	},
	{
		type: 'phone',
		name: '手机平板',
		icon: '/static/icon/mobile.png'
	}
]);
const activityList = [
	{
		id:1,
		image: '../../static/icon/activity2.jpg'
	},
	{
		id:2,
		image: '../../static/icon/activity.jpg'
	},
	{
		id:3,
		image: '../../static/icon/activity2.jpg'
	},
	{
		id:4,
		image: '../../static/icon/activity3.jpg'
	}
];
let questionList = ref([
	{
		id: 1,
		question: '回收后可以获得那些奖励？',
		answer: '衣物回收：五公斤起，回收后可以获得红包奖励。书籍回收...'
	},
	{
		id: 2,
		question: '回收后可以获得那些奖励？',
		answer: '衣物回收：五公斤起，回收后可以获得红包奖励。书籍回收...'
	},
	{
		id: 3,
		question: '回收后可以获得那些奖励？',
		answer: '衣物回收：五公斤起，回收后可以获得红包奖励。书籍回收...'
	}
]);
const swiperList = [
	{
		nickname: '从前有座山',
		avatar: '/static/icon/avatar.png',
		type: 'clothes',
		type_name:'旧衣物',
		time: '2024-11-15 00:00'
	},
	{
		nickname: '今天又是老八出局',
		avatar: '/static/icon/avatar.png',
		type: 'books',
		type_name:'书籍',
		time: '2024-11-15 00:00'
	},
	{
		nickname: '急急急急急急',
		avatar: '/static/icon/avatar.png',
		type: 'clothes',
		type_name:'旧衣物',
		time: '2024-11-15 00:00'
	}
];
const toast = ref(null);

getHomeList();

const linkOrder = (item) => {
	const type = item ? item.type:'clothes';
	uni.navigateTo({
		url: `/pages/order/index?type=${type}`
	});
};

const activityClick = ()=>{
	toast.value.showToast({
		content:'活动非主功能，请自行设计页面功能！',
	});
}

const changeQuestion = ()=>{
	questionList.value = [
		{
			id: 4,
			question: '需要自己准备什么？',
			answer: '准备一个一二三四五，准备一个一二三四五，准备一个一二三四五'
		},
		{
			id: 5,
			question: '不支持上门回收的城市改怎么办？',
			answer: '我建议哈，反正我建议哈，正如我我说的，我建议哈，正如我我说的'
		},
		{
			id: 6,
			question: '什么电视剧哈靠？',
			answer: '那年花开月正圆、海的那一边、当幸福来敲门、借鉴借鉴，八百标兵奔北坡'
		}
	]
}

function getHomeList() {
	//模拟接口请求
	setTimeout(()=>{
		skeletonSetting.hotActivityLoading = false;
		skeletonSetting.moreActivityLoading = false;
		skeletonSetting.commonQuestionLoading = false;
	},800)
}
</script>

<style lang="scss" scoped>
.index-wrapper {
	padding-bottom: 10rpx;
	.banner {
		width: 100%;
		height: 260rpx;
		margin-bottom: 245rpx;
		background-color: #ffc903;
		background: url('/static/icon/banner1.png') no-repeat center/cover;
	}
	.top-box {
		position: absolute;
		top: 30rpx;
		left: 30rpx;
		right: 30rpx;
		color: #333;
		//轮播
		.swiper {
			width: 100%;
			height: 50rpx;
			margin-bottom: 20rpx;
			.swiper-item {
				width:100%;
				height: 100%;
				.notice {
					width:100%;
					font-size: 26rpx;
					color:#503500;
					.avatar-icon {
						width: 35rpx;
						height: 35rpx;
						margin-right: 6rpx;
						border-radius: 50%;
					}
					.type{
						padding:0 10rpx;
						font-weight: bold;
					}
					.time {
						margin-left: auto;
					}
				}
			}
		}
		
		
		//旧衣回收分类
		.clothing-block {
			padding: 46rpx 30rpx;
			background-color: #fff;
			border-radius: 20rpx;
			box-shadow: 2rpx 1rpx 3rpx 0 #f5f5f5;
			.clothing-classify {
				font-size: 24rpx;
				color: #333;
				.classify-item {
					.icon {
						width: 70rpx;
						height: 70rpx;
						margin-bottom: 14rpx;
					}
				}
			}
			.rec-banner {
				width: 100%;
				height: 100rpx;
				margin: 60rpx 0 10rpx;
				border-radius: 100rpx;
				box-shadow: 5rpx 5rpx 20rpx #ccc;
			}
		}
	}
	.main-block {
		margin: 0 30rpx;
		// 所有回收分类
		.recycle-classify {
			padding: 30rpx;
			margin-bottom: 20rpx;
			font-size: 24rpx;
			color: #333;
			background-color: #fff;
			border-radius: 20rpx;
			border: 1px solid #f5f5f5;
			.classify-item {
				.icon {
					width: 70rpx;
					height: 70rpx;
					margin-bottom: 14rpx;
				}
			}
		}
		
		.bottom-block{
			position: relative;
			padding: 30rpx;
			margin-bottom: 30rpx;
			border-radius: 20rpx;
			background-color: #fff;
			overflow: hidden;
			.title {
				position: relative;
				margin-bottom: 20rpx;
				font-size: 32rpx;
				z-index: 1;
				&::before{
					content:"";
					position: absolute;
					top:6rpx;
					left: 15rpx;
					width:35rpx;
					height: 35rpx;
					border-radius: 50%;
					background-color: #3eff96;
					z-index: -1;
				}
			}
		}

		//热门活动
		.hot-activity {
			.hot-activity-item {
				width: 300rpx;
				height: 420rpx;
				border-radius: 20rpx;
				.image{
					width:100%;
					height: 100%;
					border-radius: inherit;
				}
			}
		}

		//更多精彩活动
		.more-activity {
			.activity-list {
				.activity-item {
					width: 300rpx;
					height: 420rpx;
					margin-bottom: 30rpx;
					border-radius: 20rpx;
					&:nth-last-child(1),&:nth-last-child(2){
						margin-bottom: 0;
					}
					.image{
						width:100%;
						height: 100%;
						border-radius: inherit;
					}
				}
			}
		}

		//常见问题
		.common-question {
			padding:35rpx 30rpx;
			margin-bottom: 20rpx;
			border-radius: 20rpx;
			background-color: #fff;
			border: 1px solid #f5f5f5;
			.title {
				margin-bottom: 20rpx;
				font-size: 32rpx;
				.update-icon{
					width:34rpx;
					height: 34rpx;
					background: url('../../static/icon/update.png') no-repeat center/contain;
				}
			}
			.question-list {
				.question-item {
					margin-bottom: 32rpx;
					font-size: 28rpx;
					&:last-child{
						margin-bottom: 0;
					}
					.question {
						margin-bottom: 10rpx;
					}
					.answer {
						font-size: 24rpx;
						color: #777;
					}
				}
			}
		}
	}
}
</style>
